<template>
<div>
  <h1>欢迎光临神仙超市</h1>
  <table border="1" cellspacing="0" align="center">
    <tr>
      <td>商品</td>
      <td>价格</td>
      <td>图片</td>
      <td>操作</td>
    </tr>
    <tr v-for="i in shoops">
      <td>{{i.name}}</td>
      <td>{{i.price}}</td>
      <td><img :src="'http://127.0.0.1:8000'+i.pic" alt="" width="100px"></td>
      <td>
        <button @click="tlack(i.id)">评论</button>
      </td>
    </tr>
  </table>
  <button v-for="i in numm" @click="get_shop(i)">{{i}}</button>
</div>
</template>

<script>
export default {
  name: "shopm",
  data(){
    return{
      shoops:[],
      numm:0,
      users:localStorage.getItem('usersid')
    }
  },
  methods:{
    get_shop(i){
      this.$axios.get('users/ShoopMAPI/?cpage='+i)
      .then(res=>{
        this.shoops = res.data.list
        this.numm = res.data.numm
      })
    },
    tlack(id){
      if(this.users){
        this.$router.push({path:'/tlackM',query:{'id':id}})
      }
      else {
        alert('未登录')
        this.$router.push({path:'/zcanddl'})
      }
    }
  },
  mounted() {
    this.get_shop(1)
  }
}
</script>

<style scoped>

</style>
